<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="报价单" name="first">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="item">{{'项目名称： ' + order.name }}</div>
              <div class="item">{{'订单说明： ' + order.remark }}</div>
            </el-col>
            <el-col :span="6">
              <div class="item">设备合计费用：{{ order.equipmentPrice | money }}元</div>
              <div class="item">设备成本合计费用：{{ order.equipmentPriceCost | money }}元</div>
              <div class="item">产品费率：{{ order.product }}%</div>
            </el-col>
            <el-col :span="6">
              <div class="item">施工费用：{{ order.constructionPrice | money }}元</div>
              <div class="item">施工成本费用：{{ order.constructionPriceCost | money }}元</div>
              <div class="item">人工费率：{{ order.labor }}%</div>
            </el-col>
            <el-col :span="6">
              <div class="item">订单总费用：{{ order.price | money }}元</div>
              <div class="item">订单总成本费用：{{ order.priceCost | money }}元</div>
              <div class="item">税费：{{ order.taxation| money }}元</div>
            </el-col>
          </el-row>
        </el-card>
        <el-row :gutter="10" class="padding">
          <el-col :span="1.5">
            <el-button
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['system:order:export']"
            >导出</el-button>
          </el-col>
        </el-row>
        <order-Details ref="basicInfo" :order="order" :key="key" @getOrder="getOrder" />
      </el-tab-pane>
      <el-tab-pane label="添加设备" name="second">
        <equipment-Add ref="basicInfo" :order="order" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import orderDetails from "./orderDetails";
import equipmentAdd from "./equipmentAdd";
import { getOrder } from "@/api/system/order";
import { exportDetailsTSXUWJ } from "@/api/system/details";

export default {
  components: {
    equipmentAdd,
    orderDetails
  },
  data() {
    return {
      // 选中选项卡的 name
      activeName: "first",
      key: 0,
      order: {
        id: this.$route.params && this.$route.params.orderId
      }
    };
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name == "first") {
        this.getOrder(this.order.id);
        this.key += 1;
      }
    },
    getOrder(orderId) {
      getOrder(orderId).then(response => {
        this.order = response.data;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const order = {
        orderId: this.order.id
      };
      this.$confirm("是否确认导出所有订单数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return exportDetailsTSXUWJ(order);
        })
        .then(response => {
          this.download(response.msg);
        })
        .catch(function() {});
    }
  },
  created() {
    this.getOrder(this.order.id);
  },
  filters: {
    money(val) {
      return val.toLocaleString();
    }
  }
};
</script>

<style>
.item {
  padding: 7px 0;
}
.padding {
  padding: 7px 0;
}
</style>